<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CAM</title>
     <style>
    		a.test { font-weight: bold; }
 	</style>
 	<script src="/javascript/jquery-1.7.2.js"></script>
 	<script type="text/javascript">
		var onFailSoHard = function(e) {
			console.log('Reeeejected!', e);
		};

 		function inicio() {
 			//alert("inicio");

 	 		if (hasGetUserMedia()) {
 				// Good to go!
 				//alert("getUserMedia ok");
 			} else {
 				alert('getUserMedia() is not supported in your browser');
 			}

 			// Not showing vendor prefixes.

 			window.URL = window.URL || window.webkitURL;
 			//alert("window.URL = " + window.URL);
			navigator.getUserMedia  = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
 			//alert("navigator.getUserMedia = " + navigator.getUserMedia);			

 			video = document.querySelector('video');
			//alert("video = " + video);
 			
 			video.addEventListener('click', snapshot, false);
			//alert("video click ok");

			canvas = document.querySelector('canvas');
			//alert("canvas = " + canvas);
			
			ctx = canvas.getContext('2d');
			//alert("ctx = " + ctx);
 			
			if (navigator.getUserMedia) {
				//alert("1");
				navigator.getUserMedia({audio: true, video: true}, function(stream) {
					//alert("2");
			    	video.src = window.URL.createObjectURL(stream);
					localMediaStream = stream;
			    	//alert("3");
				}, onFailSoHard);
				//alert("4");
			} else {
			  video.src = 'somevideo.webm'; // fallback.
			  //alert("5");
			}

		 	//alert("inicio fim");
 		}
 		
 		function hasGetUserMedia() {
			// Note: Opera is unprefixed.
			return !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||
 			            navigator.mozGetUserMedia || navigator.msGetUserMedia);
 		}
 		
		function snapshot() {
			//alert("snapshot");
			if (localMediaStream) {
				var cw = canvas.width;
			    var ch = canvas.height;
				//alert("cw = " + cw + ", ch = " + ch);
				ctx.drawImage(video, 0, 0, cw, ch);
				//alert("draw ok");
				// "image/webp" works in Chrome 18. In other browsers, this will fall back to image/png.
				document.querySelector('img').src = canvas.toDataURL('image/png');
				//alert("img ok");
			}
		}

		var localMediaStream = null;
		var video = null;

		var canvas = null;
		var ctx = null;
    </script>
    
  </head>
  <body onload="inicio();">
    <video style="width: 300px; height: 250px; border: thin solid black;" autoplay></video>
	<img style="position: absolute; left: 500px; width: 300px; height: 250px; border: thin solid black; background-color: orange;" src="">
	<canvas style="display:none;"></canvas>



    
    
  </body>
</html>